<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form>
          <div class="keywords">
            <el-form
              ref="formInline"
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-row>
                <el-col :span="21">
                  <el-form-item label="搜索">
                    <el-input
                      width='500px'
                      v-model="formInline.keyrowd"
                      placeholder="根据文章标题搜索"
                      @keyup.enter.native="onSubmit"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="状态">
                    <el-select
                      v-model="formInline.state"
                      placeholder="请选择"
                    >
                      <el-option
                        label="禁用"
                        value="0"
                      ></el-option>
                      <el-option
                        label="启用"
                        value="1"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="clearForm">清除</el-button>
                    <el-button
                      type="primary"
                      @click="onSubmit"
                    >搜索</el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-button
                    type="success"
                    icon="el-icon-edit"
                    @click="addmsg"
                  >新增技巧</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-form>
        <!-- 消息提示 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%;"
          v-loading="isLoading"
        >
          <el-table-column
            label="序号"
            type="index"
            :index="indexMethod"
          />
          <el-table-column
            prop="title"
            label="文章标题"
            width="380"
          >
            <template #default="{ row }">
              <span>{{row.title}}</span>
              <i
                @click="watchMovie(row.videoURL)"
                v-if="row.videoURL"
                type="primary"
                class="el-icon-film"
              ></i>
            </template>

          </el-table-column>
          <el-table-column
            prop="visits"
            label="阅读数"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="录入人"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="录入时间"
            :formatter="formatTime"
          >
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            :formatter="formateData"
          ></el-table-column>
          <!-- 操作状态 -->
          <el-table-column
            prop="name"
            label="操作"
            fixed="right"
            width="180"
          >
            <!-- 操作按钮 -->
            <template #default="{ row }">
              <el-button
                type="text"
                @click="getPreview(row)"
              >预览</el-button>
              <el-button
                type="text"
                @click="getState(row)"
              >{{row.state?'禁用':'启用'}}</el-button>
              <el-button
                type="text"
                :disabled="changeButton(row)"
                @click="reviseList(row)"
              >编辑</el-button>
              <el-button
                type="text"
                :disabled="changeButton(row)"
                @click="delList(row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size='pagesize'
          layout="total, prev, pager, next,sizes,  jumper"
          :total="counts"
        >
        </el-pagination>
      </el-card>
    </div>
    <!-- 视频弹层 -->
    <el-dialog
      class="video-dialog"
      :visible="visible"
      width="75%"
      append-to-body
      @close="closeVideoModal"
    >
      <!-- <span class="closespan">x</span> -->
      <video
        :src="videoSrc"
        controls="controls"
        autoplay
        width="100%"
        height="100%"
      >
      </video>
    </el-dialog>
    <!-- 增加修改弹层 -->
    <articles-add
      ref="article"
      :showDialog.sync="showDialog"
      :listForm="listForm"
    ></articles-add>
    <!-- 预览弹层 -->
    <articles-preview
      :showPreviewDialog.sync="showPreviewDialog"
      :preform="listForm"
    ></articles-preview>
  </div>
</template>

<script>
import { list, remove, detail, changeState } from '@/api/hmmm/articles.js'
import dayjs from 'dayjs'
import ArticlesAdd from '../components/articles-add.vue'
import ArticlesPreview from '../components/articles-preview.vue'
export default {
  components: { ArticlesAdd, ArticlesPreview },
  data () {
    return {
      // 查询表单信息
      formInline: {
        keyrowd: '',
        state: '',
        page: 1,
        pagesize: 10
      },
      // 提示框信息
      alertText: '',
      isLoading: false,
      showDialog: false,
      visible: false,
      showPreviewDialog: false,
      tableData: [], // 表格信息
      page: 1, // 页码
      pages: 2, // 全部页码
      pagesize: 10, // 一页多少个
      counts: 0, // 总页数
      state: 0,
      listForm: {}, // 修改/预览 数据
      videoSrc: ''
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getArticleList()
  },
  methods: {
    // 按钮控制效果
    async getState (row) {
      if (row.state === 0) {
        this.$message.success('启用成功')
        row.state = 1
      } else {
        row.state = 0
        this.$message.success('禁用成功')
      }
      await changeState({ id: row.id, state: row.state })
    },
    // 切换效果
    changeButton (data) {
      if (data.state === 1) {
        return true
      } else {
        return false
      }
    },
    // 关闭视频弹层
    closeVideoModal () {
      this.visible = false
      this.videoSrc = ''
    },
    watchMovie (url) {
      this.visible = true
      // this.videoSrc = 'https://images.weserv.nl/?url=' + url
      this.videoSrc = url
    },
    // 点击搜索
    async onSubmit () {
      this.getArticleList(this.formInline.keyrowd, this.formInline.state)
    },
    // 页码
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.getArticleList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getArticleList()
    },
    // 页码计算
    indexMethod (index) {
      return (this.page - 1) * this.pagesize + index + 1
    },
    // 获取列表
    async getArticleList (keyrowd, state) {
      this.isLoading = true
      const { data } = await list({
        state: state,
        keyword: keyrowd,
        page: this.page,
        pagesize: this.pagesize
      })
      // console.log(data)
      this.tableData = data.items
      this.counts = data.counts
      this.state = data.items.state
      this.alertText = `共 ${this.counts} 条记录`
      this.formInline.title = data.items.title
      this.isLoading = false
    },
    // 处理时间
    formatTime (row, column, cellvalue, index) {
      return dayjs(cellvalue).format('YYYY-MM-DD HH:mm:ss')
    },
    // 删除功能
    delList (id) {
      this.$confirm('亲！您确定要删除吗？', '温馨提示')
        .then(async () => {
          await remove(id)
          console.log(id)
          this.$message.success('删除成功')
          if (this.tableData.length === 1 && this.page > 1) {
            this.page--
          }
          this.getArticleList()
        })
        .catch(() => {})
    },
    // 清空搜索表单
    clearForm () {
      this.getArticleList()
      this.$refs.formInline.resetFields()
      this.formInline = {
        title: '',
        description: ''
      }
    },
    // 转换启用状态
    formateData (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      if (cellValue === 1) {
        return '启用'
      } else {
        return '禁用'
      }
    },
    // 打开增加弹层
    addmsg () {
      this.showDialog = true
    },
    // 打开修改弹层
    async reviseList (row) {
      this.showDialog = true
      const { data } = await detail(row)
      // console.log(data)
      this.listForm = data
    },
    // 打开详情弹层
    async getPreview (row) {
      this.showPreviewDialog = true
      const { data } = await detail(row)
      // console.log(data)
      this.listForm = data
    }
  }
}
</script>

<style lang="scss" scoped>
.el-icon-film {
  color: #00f;
  font-size: 18px;
  padding-left: 10px;
}
.video-dialog {
  ::v-deep .el-dialog {
    // 取消阴影和背景色
    .el-dialog__body {
      padding: 0;
      background-color: rgba(0, 0, 0, 0);
      border: 0;
    }
    .el-dialog__header {
      padding: 0;
      border: 0;
    }
    .el-dialog__headerbtn {
      // float: right;
      width: 30px;
      height: 30px;
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translate(-50%);
      background: rgba(0, 0, 0, 0.4);
      box-shadow: 0 0 5px rgb(0 0 0 / 40%);
      border-radius: 50%;
      text-align: center;
      line-height: 30px;
      color: rgba(240, 229, 229, 0);
      font-size: 20px;
    }
    video {
      margin-bottom: -10px;
    }
  }
}
</style>
